<template>
	<div>
		<div>
			<el-container>
				<el-main>
					<el-carousel indicator-position="outside" height="450px">
						<el-carousel-item v-for="item in imgList" :key="item.id">
							<el-row>
								<el-col :span="24">
									<router-link :to="item.link">
										<img :src="item.image_url" class="banner_img" />
									</router-link>
								</el-col>
							</el-row>
						</el-carousel-item>
					</el-carousel>
				</el-main>
			</el-container>
		</div>
		<div>
			<el-card class="box-card">
				<div slot="header" class="clearfix">
					<div>
						<el-button type="text"><img src="../assets/images/brand.png" style="vertical-align: middle;" />&nbsp;&nbsp;&nbsp;&nbsp;<span
							 style="height: 100%;vertical-align: middle;line-height: 20px;">品牌供应商</span></el-button>
					</div>
				</div>
				<div id="wrap">
					<div v-for="brand in brandList" :key="brand.id" class="item el-left">
						<router-link :to="{path: '/branddetail', query: {id:brand.id}}">
							<img :src="brand.app_list_pic_url" :title="brand.simple_desc" />
							<span style="color: #00AB42;">{{brand.name}}</span>
						</router-link>
					</div>
				</div>

			</el-card>
		</div>


		<div style="margin-top: 20px;">
			<el-card class="box-card">
				<div>
					<el-row :gutter="10">
						<el-col :span="20">
							<div>
								<el-card class="box-card">
									<div slot="header" class="clearfix">
										<div>
											<el-button type="text"><img src="../assets/images/new.png" style="vertical-align: middle;" />&nbsp;&nbsp;&nbsp;&nbsp;<span
												 style="height: 100%;vertical-align: middle;line-height: 20px;color: red;">新品首发</span></el-button>
										</div>
									</div>
									<div>
										<div v-for="inew in newList" :key="inew.id" class="el-left-hot">
											<router-link :to="{path: '/productdetail', query: {id:inew.id}}">
												<div style="float: left; width: 70%;">
													<img :src="inew.list_pic_url" :title="inew.goods_brief" />
												</div>
												<div style="float: left; width: 30%;">
													<span class="el-left-hot-title" style="color: #000;">{{inew.name}}</span>
													<span class="el-left-hot-p">¥{{inew.retail_price}}</span>
												</div>


											</router-link>
										</div>
									</div>

								</el-card>
								<el-card class="box-card" style="margin-top:20px;">
									<div slot="header" class="clearfix">
										<div>
											<el-button type="text"><img src="../assets/images/hot.png" style="vertical-align: middle;" />&nbsp;&nbsp;&nbsp;&nbsp;<span
												 style="height: 100%;vertical-align: middle;line-height: 20px;color: #46A3FF;">热卖推荐</span></el-button>
										</div>
									</div>
									<div>
										<div v-for="inew in hotList" :key="inew.id" class="el-left-hot">
											<router-link :to="{path: '/productdetail', query: {id:inew.id}}">
												<div style="float: left; width: 70%;">
													<img :src="inew.list_pic_url" :title="inew.goods_brief" />
												</div>
												<div style="float: left; width: 30%;">
													<span class="el-left-hot-title" style="color: #000;">{{inew.name}}</span>
													<span class="el-left-hot-p">¥{{inew.retail_price}}</span>
												</div>


											</router-link>
										</div>
									</div>

								</el-card>
							</div>
						</el-col>
						<el-col :span="4">
							<el-card class="box-card">
								<div slot="header" class="clearfix">
									<div>
										<el-button type="text" @click="moreTopic()"><span>专题报道&nbsp;&nbsp;更多>></span></el-button>
									</div>
								</div>
								<div>
									<div v-for="(topic,index) in topicList" :key="topic.id">
										<el-button type="text">
											{{index}}. <router-link :to="{path: '/topicdetail', query: {id:topic.id}}" style="color: #008800;">
												{{topic.title}}
											</router-link>
										</el-button>

									</div>
								</div>
							</el-card>
						</el-col>
					</el-row>
				</div>
			</el-card>

		</div>
	</div>
</template>

<script>
	export default {
		name: 'vmain',
		data() {
			return {
				// 图片需要引入, 否则无法显示
				imgList: [{
					id: 0,
					content: '',
					image_url: '',
					link: ''
				}],
				brandList: [{}],
				newList: [{}],
				hotList: [{}],
				topicList: [{}],
			};
		},
		components: {

		},
		methods: {
			moreTopic() {
				this.$router.push({
					path: '/topic'
				})
			},
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			},
			initCarous() {
				let _this = this;
				_this.imgList.pop();
				_this.$axios.post(_this.$api.AdListUrl, {}).then(function(response) {
						_this.imgList = response.data.list;
					})
					.catch(function(error) {
						console.log(error)
					});
			},
			initBrand() {
				let _this = this;
				_this.brandList.pop();
				_this.$axios.post(_this.$api.BrandUrl, {}).then(function(response) {
						_this.brandList = response.data.data;

					})
					.catch(function(error) {
						console.log(error)
					});
			},
			initNew() {
				let _this = this;
				_this.newList.pop();
				_this.$axios.post(_this.$api.GoodsNew, {}).then(function(response) {
						_this.newList = response.data.data;

					})
					.catch(function(error) {
						console.log(error)
					});
			},
			initHot() {
				let _this = this;
				_this.hotList.pop();
				_this.$axios.post(_this.$api.GoodsHot, {}).then(function(response) {
						_this.hotList = response.data.data;

					})
					.catch(function(error) {
						console.log(error)
					});
			},
			initTopic() {
				let _this = this;
				_this.topicList.pop();
				_this.$axios.post(_this.$api.TopicIndex, {}).then(function(response) {
						_this.topicList = response.data.data;
					})
					.catch(function(error) {
						console.log(error)
					});
			}

		},
		mounted: function() {
			this.initCarous();
			this.initBrand();
			this.initNew();
			this.initHot();
			this.initTopic();
		}
	}
</script>

<style>
	.icon-content {
		text-align: left;
	}

	.icon-content span {
		height: 100%;
		vertical-align: middle;
		line-height: 60px;

	}

	.icon-content img {
		vertical-align: middle;
	}

	.icon-url {
		width: 12px;
		height: 12px;
	}

	.icon-url-2 {
		width: 48px;
		height: 48px;
	}

	.submenu-l2 {
		text-align: center;
		width: 160px;
		float: left;
		height: 52px;
		line-height: 80px;
	}

	.submenu-l3 {
		width: 600px;
		float: left;
		background-color: #D9D9D9;
		height: 52px;
		padding: 5px 8px;
		margin-top: 5px;
	}

	[sid='pop'].el-popper {
		background-color: transparent;
	}

	#mainmuenu li {
		width: 100%;
		color: #FFFFFF;
	}

	.el-button {
		border: 0px !important;
		border-radius: 0px !important;
	}

	.banner_img {
		width: 100%;
	}

	.el-vip {
		width: 32px;
		height: 32px;
		background-image: url(../assets/images/vip.png);
	}

	.el-left {
		float: left;
		width: 13%;
		height: 185px;
		margin: 10px;
		padding: 10px;
		border: #00FF00 1px solid;
	}

	.el-left-hot {
		float: left;
		width: 28%;
		height: 185px;
		margin: 10px;
		padding: 10px;
		border-right: #999999 1px dashed;
	}

	.el-left-hot-title {
		width: 100%;
		height: 145px;
		margin: 1px;
		color: #00AB42;
		display: block;
	}

	.el-left-hot-p {
		width: 100%;
		height: 20px;
		margin: 1px;
		color: red;
		display: block;
	}

	.el-left-hot img {
		width: 100%;
		height: 170px;
	}

	.el-left img {
		display: block;
		width: 100%;
		height: 130px;
	}

	.el-left span {
		display: block;
		width: 100%;
		text-align: center;
		margin-top: 10px;
		margin-bottom: 5px;
	}

	.el-cat-left {
		background-color: #41A863;
		height: 250px;
		color: #FFFFFF;
		font-size: 16px;
		font-weight: 600;
		text-align: center;
	}

	.el-cat-right {
		background-color: #FFFFFF;
		height: 250px;
		font-size: 14px;
		font-weight: 300;
	}

	.menu-btn {
		width: 100%;
		text-align: left;
		background-color: transparent;
		color: #fff;
		clear: both;
	}

	.menu-btn::hover {
		width: 100%;
		text-align: left;
		background-color: #FFFFFF;
		color: #000;
	}

	.el-pagination .btn-next .el-icon,
	.el-pagination .btn-prev .el-icon {
		margin-top: 5px !important;
	}
</style>
